<!--
 * @Description:
 * @version:
 * @Author: 潘骏杰
 * @Date: 2022-03-31 10:34:53
 * @LastEditors: 周子尧
 * @LastEditTime: 2022-04-11 10:27:10
-->
<!--
 * @Description:
 * @version: 服务包底部弹窗--购物车
 * @Author: 潘骏杰
 * @Date: 2022-03-30 09:03:57
 * @LastEditors: 潘骏杰
 * @LastEditTime: 2022-03-30 13:36:26
-->
<template>
  <van-action-sheet v-model="showBol">
    <div class="content">
      <div class="title gray-9">已选服务</div>
      <ul class="bottom-ul">
        <!-- .stop是click自带的冒泡   -->
        <li
          v-for="item in list"
          v-show="item.badge > 0"
          :key="item.id"
          class="row re"
        >
          <van-col span="18">
            <div class="title black">{{ item.name }}</div>
            <div class="title-detail van-ellipsis">{{ item.detail }}</div>
            <div class="price">¥{{ item.price }}</div>
          </van-col>
          <van-col span="6">
            <div class="right">
              <van-stepper
                v-model="item.badge"
                min="0"
                theme="round"
                button-size="22"
                disable-input
                @change="change(item)"
              /></div></van-col>
        </li>
      </ul>
      <!-- submit -->
      <van-submit-bar
        button-color="#4A90E2"
        text-align="left"
        :price="305 * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-icon
          name="cart"
          :badge="num"
          size="40"
          style="margin-right: 20px"
          color="#4A90E2"
        />
      </van-submit-bar>
    </div>
  </van-action-sheet>
</template>
<script>
export default {
  name: 'BottomDialogCart',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    titleList: {
      type: Array,
      default: () => {
        return []
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 这里存放数据
    return {
      showBol: this.show,
      submiting: false,
      num: 0,
      choseList: []
    }
  },
  watch: {
    show(newvalue) {
      // 不支持字符串直接修改，所以需要在这里使用其中之一的方法监听
      // 监听父容器的show布尔值改变内部组件的布尔值（子组件的布尔值修改会报错）
      // 除非遇到json类型的对象深浅拷贝，是可更改
      this.showBol = newvalue
      console.log(newvalue)
      console.log(this.titleList, this.list)
      this.num = this.list.filter((e) => {
        return e.badge > 0
      }).length
    },
    showBol(bol) {
      // 子组件使用自己的布尔值监听修改父容器的布尔值
      console.log(bol)
      this.$emit('channelCart', bol)
    }
  },
  methods: {
    change(obj, num) {
      if (num === 1) {
        obj.badge = 1
      }
      this.num = this.list.filter((e) => {
        return e.badge > 0
      }).length
      // 已经改变
      this.$emit('getNum', this.num)
      console.log(this.choseList)
      // this.freeList
    },
    onSubmit() {
      this.submiting = true
      console.log(this.list, this.choseList)
      this.submiting = false
      this.showBol = false
      // this.$toast.success("提交成功");
      // 走外部父容器提交
      this.$emit('onSubmit')
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  padding: 20px;
  font-size: 18px;
}
.title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 14px;
}
.row {
  margin-bottom: 10px;
}
.row .title {
  font-size: 18px;
  margin-bottom: 0;
}
.title-detail {
  font-weight: 400;
  color: #9b9b9b;
  font-size: 16px;
  width: 95%;
}
.price {
  line-height: 25px;
  font-size: 14px;
  width: 100%;
}
.chose-title {
  font-size: 16px;
}
ul {
  margin-bottom: 30px;
  overflow: hidden;
}
.row-time {
  border-radius: 7px;
  line-height: 40px;
  padding: 10px 25px;
  margin: 10px 0px 0 0;
  font-size: 16px;
}

.div-cont {
  padding: 20px;
  font-size: 16px;
  margin-bottom: 30px;
}
.div-cont .title {
  font-size: 16px;
}
.right {
  margin: 15px 0 0 0;
}
/deep/.dialogTap .van-tabs__wrap {
  display: inline-block;
  width: 200px;
}
.choseDiv {
  border-radius: 8px;
  text-align: center;
  padding: 10px;
  line-height: 40px;
  margin-bottom: 20px;
  width: 120px;
}
.row-time,
.choseDiv {
  background: #eaeaea;
}
.current .choseDiv,
.row-time.current {
  background: rgb(74 144 226 / 20%);
  color: #4a90e2;
}
</style>
